<meta
  name="description"
  content="Fonoster: The open-source alternative to Twilio"
/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..700&display=swap"
  rel="stylesheet"
/>
<style>
  :root {
    --font-sans:
      "Poppins", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }

  * {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgb(226 232 240);
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  html,
  body {
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    font-family: var(--font-sans);
  }

  [data-sonner-toast][data-styled="true"] [data-content] {
    width: 100%;
  }

  #storybook-root {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
    width: 100%;
  }

  .sbdocs.sbdocs-content {
    max-width: 840px;
  }

  .sbdocs :is(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)) {
    font-size: 3.5rem;
    line-height: 3.5rem;
    font-weight: bold;
  }

  .sbdocs :is(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
    font-size: 2rem;
    line-height: 2.25rem;
    font-weight: bold;
    border: none;
    margin-bottom: 1rem;
  }

  .sbdocs :is(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) {
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-weight: bold;
  }

  .sbdocs :is(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: bold;
  }

  .sbdocs :is(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
  .sbdocs :is(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .sbdocs :is(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)) {
    text-decoration: underline;
    text-underline-position: under;
  }

  .sbdocs :is(em:not(.sb-anchor, .sb-unstyled, .sb-unstyled em)) {
    font-style: italic;
  }

  .sbdocs :is(strong:not(.sb-anchor, .sb-unstyled, .sb-unstyled strong)) {
    font-weight: 700;
  }
</style>
